<template>
  <div id="app" @keyup="isDo()" @click="isDo()" @mouseover="isDo()">
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      lastTime: null, // 最后一次点击的时间
      currentTime: null, // 当前点击的时间
      timeOut: 30 * 60 * 1000 // 设置超时时间:30分钟
    }
  },
  methods: {
    isDo() {
      this.currentTime = new Date().getTime() // 记录这次点击的时间
      const path = this.$route.path
      if (this.currentTime - this.lastTime > this.timeOut && path !== '/') { // 判断上次最后一次点击的时间和这次点击的时间间隔是否大于10分钟
        // 这里写状态已过期后执行的操作
        this.$Modal.confirm({
          title: '登录超时',
          content: '用户长时间未操作，请重新登录',
          onOk: () => {
            this.$router.push({ path: '/' })
            sessionStorage.clear()
          },
          onCancel: () => {
            this.$router.push({ path: '/' })
            sessionStorage.clear()
          }
        })
      } else {
        this.lastTime = new Date().getTime() // 如果在30分钟内点击，则把这次点击的时间记录覆盖掉之前存的最后一次点击的时间
      }
    }
  },
  created() {
    this.lastTime = new Date().getTime() // 网页第一次打开时，记录当前时间
  }
}
</script>

<style>
#app {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>
